<!DOCTYPE html >

<html lang = "en">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstore.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="https://unpkg.com/swiper@9.1.0/swiper-bundle.min.css">

<!--<style>-->
<!--  .swiper-container {-->
<!--    /*width: 100%;*/-->
<!--    /*height: 300px; !* 设置适合的高度 *!*/-->
<!--    position: absolute; /* 使用绝对定位将其放置在页面的顶部 */-->
<!--    top: 0;  /* 距离页面顶部0 */-->
<!--    left: 50%; /* 使轮播居中对齐 */-->
<!--    transform: translateX(-50%); /* 水平居中 */-->
<!--    opacity: 0.7; /* 设置轮播图透明度 */-->
<!--  }-->
<!--</style>-->

</head>

<body>
<div id="Content">
  <div align="center"><img src="images/Welcome_to_JPetStore_6.png"/></div>

  <p><a href="mainForm">Enter the Store</a></p>
  <p><sub>Copyright Central South University. </sub></p>



  <!-- Swiper 容器 -->
  <div class="swiper-container" align="center">
    <div class="swiper-wrapper">
      <!-- 9张图片的轮播幻灯片 -->
      <div class="swiper-slide"><img src="images/1.jpg" alt="Image 1"></div>
      <div class="swiper-slide"><img src="images/2.jpg" alt="Image 2"></div>
      <div class="swiper-slide"><img src="images/3.jpg" alt="Image 3"></div>
      <div class="swiper-slide"><img src="images/4.jpg" alt="Image 4"></div>
      <div class="swiper-slide"><img src="images/5.jpg" alt="Image 5"></div>
      <div class="swiper-slide"><img src="images/6.jpg" alt="Image 6"></div>
      <div class="swiper-slide"><img src="images/7.jpg" alt="Image 7"></div>
      <div class="swiper-slide"><img src="images/8.jpg" alt="Image 8"></div>
      <div class="swiper-slide"><img src="images/9.jpg" alt="Image 9"></div>
    </div>

  </div>

  <script src="https://unpkg.com/swiper@9.1.0/swiper-bundle.min.js"></script>
  <script>
    // 初始化 Swiper
    var swiper = new Swiper('.swiper-container', {
      // direction: '', // 垂直方向滑动
      loop: true, // 循环播放
      effect: 'fade', // 淡入淡出效果
      autoplay: {
        delay: 3000, // 每隔 3 秒切换
      },
    });
  </script>



</div>

</body>
</html>
